Chapter 19: Exercises

選擇題


簡答題

  1. 請說明使用「非同步傳輸」的兩種基本方式。
  2. AJAX 的全名為何?它涵蓋了哪一些既有的技術?
  3. AJAX 主要是使用了哪一個物件來進行「以非同步的方式來執行遠端的程式,並接收相關的結果」?
  4. Google 的哪一些應用是採用 AJAX 來完成?
  5. 請說明使用 AJAX 的優點和缺點。
  6. 請簡單說明「使用 iframe 進行非同步傳輸」的基本流程。
  7. 請問 Client-side JavaScript 中的 window.parent 指的是什麼?有何功能?
  8. 為何在「使用 iframe 進行非同步傳輸」的過程中,子網頁無法支援 post 的資料傳送方式?
  9. 在「使用 iframe 進行非同步傳輸」的過程中,若子網頁要使用 get 的方式來傳送資料,要注意哪些事項?
  10. 請說明「使用 AJAX 進行非同步傳輸」的三個基本步驟。
  11. 假設 ajax 是由下列方式產生的物件:

    ajax = new ActiveXObject("Msxml2.XMLHTTP");

    請問下列性質的意義:
    1. ajax.readyState
    2. ajax.status
  12. 何謂「JavaScript framework」?
  13. 「$('singerName')」是 prototype.js 所提供的簡化語法,其功能全等於什麼?
  14. 「$F('singerName')」是 prototype.js 所提供的簡化語法,其功能全等於什麼?
  15. 使用 prototype.js 時,假設所產生的 AJAX 物件是 ajax,則ajax.Responders.register() 的功能為何?我們可以使用這些功能來做什麼事?

程式題

請使用本章所學到的 AJAX 程式技巧來完成下列作業:
  1. (***) 使用AJAX來進行選歌: 請先看看此習題的範例網頁:

    習題格式範本(selectSong01.asp):

    這是一個很典型的樹狀選單,你可以先選「歌曲語言」,再選「歌手名字」,最後再選「歌曲清單」,這種「三框連動」式的樹狀選單,可以讓你再選取資料時,不會因為大量資料而無所適從。但是,在這個範例中,所有的資料都已經寫死在用戶端的 JavaScript 之中,因此在實用上的效用不大。本次作業就是要寫成上述範本的功能,但是資料必須立刻從資料庫 exerciseTemplate/song.mdb 抓出來,而不是寫死在用戶端的 JavaScript。此外,我們不希望經由換頁來達成新資料的顯示,所以我們必須使用 AJAX 來完成此次的作業。

    此網頁必須具備下列功能:

    1. 首先網頁將所有歌曲的語言即時從資料庫中取出,列出來在第一個欄位裡。
    2. 使用者可以隨意選取一個語言後,AJAX 再將此種語言內所有歌手列出在第二個欄位中。
    3. 使用者可以隨意選取一個歌手後,AJAX 再將此位歌手所唱過的所有歌曲列出於第三欄位。
    4. 最後使用者任意點選其中一首歌時,AJAX 可以列出此首 Midi 的網址。
    5. 最後當使用者按下「欣賞音樂」後,即可聽到此首 Midi。

    注意事項:

    1. 資料庫為 exerciseTemplate/song.mdb,共包含三個資料表 (Singer, Song, Midi),表和表之間有關聯性存在,此關聯性可由「工具/資料庫關聯圖」來顯示。每個表的欄位名稱應可望文生義,其中 SSN 代表 System Serial Number,是每筆資料在資料表中唯一無二的編號。
    2. Midi 資料表的 Path 欄位代表 Midi 檔的位置,但其真正網址必須再加上"http://mirlab.org/jang/data/"。例如「聽海」這首歌的 Path 是「midifile/國語_女/張惠妹/聽海.mid」,那麼它的真正網址就是「http://mirlab.org/jang/data/midifile/國語_女/張惠妹/聽海.mid」。
  2. (***) 使用AJAX來進行選歌之二: 請重複上題,但是加入下列功能:
    • 英文人名或歌名要按字母順序排列
    • 中文人名要按「個人、女」、「個人、男」、「團體」排列,再按內碼次序排列
    • 中文歌名要按字數排列,再按內碼次序排列
    (請注意:大部份的排序功能,可以使用 SQL 指令完成。)

JScript 程式設計與應用:用於伺服器端的 ASP 環境